<template>
    <div class="backgImage">
        <!-- 安全运行天数 -->
        <div class="div1">
            <TitleView title="安全运行天数" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <DataP :data="DataP"></DataP>
            </div>
        </div>
        <!-- 年度产量 -->
        <div class="div2">
            <TitleView title="年度产量" :titlemore="true" @titleClick="titleMoreClick"></TitleView>
            <div class="div2_d pr32">
                <div class="div2_d_left">
                    <p class="div2_d_left_p">{{ }}</p>
                    <img class="" style="width: 97px;height: 118px;" src="../../assets/overview_left_shu.png" alt=""
                        srcset="">
                </div>
                <div class="div2_d_right">
                    <div class=" div2_d_right_d" v-for="item in DataY"><span class="div2_d_right_p">{{ item.NAME
                            }}</span> <span class="div2_d_right_p_span">{{ fixedFun(item.pointValue) }}<span
                                class="div2_d_right_p">{{ item.unit ? item.unit : "" }}</span></span> </div>
                </div>
            </div>
        </div>
        <!-- 值班人员 -->
        <div class="div3">
            <TitleView title="值班人员" :titlemore="true" @titleClick="titleMoreClick"></TitleView>
            <div class="div3_d pr32 pl20">
                <!-- <DataC :data="DataC"></DataC> -->
                 <DataLeft_b :data="DataD"></DataLeft_b>
            </div>
        </div>
        <!-- 能耗管理 -->
        <div class="div4">
            <TitleView title="能耗管理" :titlemore="true" @titleClick="titleMoreClick"></TitleView>
            <div class="div4_d pr32 pl20">
                <DataN :data="DataN"></DataN>
            </div>
        </div>
    </div>

</template>

<script>
import { formattedNumber } from "@/util/my_func"
import { over_left_view1, over_left_view4, over_left_view2, over_left_view3, over_left_view5 } from '@/request/api.js'
import DataP from "./components/DataP"
import DataC from "./components/DataC"
import DataLeft_b from "./components/DataLeft_b.vue"
import DataN from "./components/DataN"
import DataCImg1 from "@/assets/Data/组 102.png"
import DataCImg2 from "@/assets/Data/组 103.png"
import DataCImg3 from "@/assets/Data/组 106.png"
import DataCImg4 from "@/assets/Data/组 107.png"
import DataCImg5 from "@/assets/Data/组 109(1).png"
import DataCImg6 from "@/assets/Data/组 109(2).png"
import DataNImg1 from "@/assets/Data/组 109.png"
import DataNImg2 from "@/assets/Data/组 110.png"
import DataNImg3 from "@/assets/Data/组 111.png"

export default {
    components: {
        DataP, DataC, DataN,DataLeft_b
    },
    data() {
        return {
            DataP: {
                title: "安全运行",
                number: "1012",
                unit: "天",
                key: "left"
            },
            DataY: [
                {
                    "NAME": "T1901",
                    "ordertime": "2024",
                    "pointValue": 0
                },{
                    "NAME": "液化气",
                    "ordertime": "2024",
                    "pointValue": 0
                },{
                    "NAME": "乙烷",
                    "ordertime": "2024",
                    "pointValue": 0
                },{
                    "NAME": "稳定轻烃",
                    "ordertime": "2024",
                    "pointValue": 0
                },
            ],
            DataN: [
                {
                    src: DataNImg3,
                    title: "供水",
                    number: "0",
                    unit: "water"
                }, {
                    src: DataNImg2,
                    title: "供气",
                    number: "0",
                    unit: "gas"
                }, {
                    src: DataNImg1,
                    title: "供电",
                    number: "0",
                    unit: "electricity"
                },
            ],
            DataC: [
                {
                    src: DataCImg6,
                    title: "电气专业",
                    bool: true,
                    number: "",
                    unit: "",
                    key: "electricalMajor"
                },
                {
                    src: DataCImg2,
                    title: "设备专业",
                    bool: false,
                    number: "",
                    unit: "",
                    key: "equipmentProfessional"
                },
                {
                    src: DataCImg3,
                    title: "仪控专业",
                    bool: true,
                    number: "",
                    unit: "",
                    key: "instrumentControlSpecialty"
                },
                {
                    src: DataCImg4,
                    title: "带班领导",
                    bool: false,
                    number: "",
                    unit: "",
                    key: "leadShiftLeaders"
                },
                {
                    src: DataCImg5,
                    title: "值班干部",
                    bool: true,
                    number: "",
                    unit: "",
                    key: "foremanCadresTwo"
                },
                {
                    src: DataCImg6,
                    title: "值班人员",
                    bool: false,
                    number: "",
                    unit: "",
                    key: "watchKeepers"
                }
            ],
            DataD:[]
        }
    },
    created() {
        this.getData()
    },
    methods: {
        titleMoreClick(msg) {
            console.log(msg);

        },

        getData() {
            over_left_view1().then((res) => {
                console.log("res1:", res);
                this.DataP.number = res.data.toString()
            })
            over_left_view4().then((res) => {
                // console.log("res4:", res);
                for (let index = 0; index < 3; index++) {
                    this.DataN[index].title = res.data[index].NAME
                    this.DataN[index].number = Number(res.data[index].pointValue).toFixed(2)

                }
            })
            over_left_view2().then((res) => {
                // console.log("res2:", res);
                this.DataY = res.data
                this.DataY.forEach(element => {
                    element.unit = "万吨"
                    element.pointValue=element.pointValue/10000
                });
            })
            over_left_view3().then((res) => {
                console.log("res3:", res);
                this.DataD= res.data
                return
                over_left_view5().then((value) => {
                    console.log("res5:", value);
                    this.DataC.forEach(data => {
                        data.number = ""
                        console.log(datas[data.key]);
                        if (datas[data.key]) {
                            let arr = datas[data.key].split(",")
                            arr.forEach(elements => {
                                value.data.forEach(element => {
                                    if (elements == element.userId) {
                                        data.number = data.number + " " + element.nickName
                                    }
                                })
                            })
                        } else {
                            data.number = "暂无"
                        }
                    });
                })

            })

        },

        fixedFun(res) {
            return formattedNumber(Number(res).toFixed(2))
        }
    }
}
</script>

<style lang="scss" scoped>
.div1 {
    height: 150px;
    width: 363px;
    .div1_d {
        margin-top: 25px;
    }
}

.div2 {
    height: 250px;
    margin-top: 10px;
    margin-bottom: 10px;

    .div2_d {
        padding-left: 10px;
        display: flex;
        justify-content: space-between;

        .div2_d_left {
            width: 97px;

            .div2_d_left_p {
                text-align: center;
                font-family: PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #D0E5F5;
            }
        }

        .div2_d_right {
            padding-top: 20px;
            width: 271px;
            flex-direction: column;
            display: flex;
            justify-content: space-between;
            height: 170px;

            .div2_d_right_d {
                width: 271px;
                display: flex;
                align-items: center;
                height: 25px;
                padding: 0 0 0px 35px;
                justify-content: space-between;
                background: url("@/assets/data_p.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
            }

            .div2_d_right_p {
                font-family: PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #D0E5F5;
                margin-top: -8px;

            }

            .div2_d_right_p_span {
                padding-right: 30px;
                // width: 150px;
                font-family: DIN;
                font-weight: 500;
                font-size: 24px;
                color: #4DF7FF;
                margin-top: -8px;
            }
        }
    }
}

.div3 {
    height: 284px;

    .div3_d {
        margin-top: 15px;
        // width: 271px;
    }
}

.div4 {
    .div4_d {
        margin-top: 15px;
        // width: 271px;
    }
}
</style>